<template>
  <div class="layout">
    <headerVue></headerVue>
    <div class="content">
      <diaryListVue></diaryListVue>
      <operateListVue></operateListVue>
      <DiaryAreaBoxVue></DiaryAreaBoxVue>
    </div>
  </div>
</template>

<script>
import headerVue from "@/components/header.vue";
import diaryListVue from "@/components/diaryList.vue";
import operateListVue from "@/components/operateList.vue";
import DiaryAreaBoxVue from '@/components/DiaryAreaBox.vue';
export default {
  components: {
    headerVue,
    diaryListVue,
    operateListVue,
    DiaryAreaBoxVue

  },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' scoped>
.content {
  height: calc(100vh - 100px);
  display: flex;
}
</style>